<template>
    <div class="login">
        <img src="../../assets/image/logtop.png" alt="" class="logtop" />
        <van-tabs v-model="active" class="tabs" title-active-color="#282828" title-inactive-color="#999999">
            <van-tab title="账号登录">
                <van-form @submit="onSubmit">
                    <van-field
                        class="inpbj"
                        v-model="account"
                        name="account"
                        placeholder="请输入手机号"
                        left-icon="phone-circle-o"
                        :rules="[{ pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '请输入正确的手机号' }]"
                    />
                    <!-- pattern : 正则验证 只要是13,14,15,16,17,18,19开头即可 -->
                    <van-field v-model="password" type="password" name="password" placeholder="请填写登录密码" left-icon="lock" :rules="[{ pattern: /^[\w]{5,16}$/, message: '请填写密码' }]">
                    </van-field>
                    <div style="margin: 16px">
                        <van-button round block type="info" native-type="submit">登录</van-button>
                    </div>
                </van-form>
            </van-tab>

            <!-- 验证码登入 -->
            <van-tab title="快速登录">
                <van-form @submit="codeLogin">
                    <van-field
                        v-model="account"
                        name="account"
                        placeholder="请输入手机号"
                        left-icon="phone-circle-o"
                        :rules="[{ pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '请输入正确的手机号' }]"
                    />
                    <!-- pattern : 正则验证 只要是13,14,15,16,17,18,19开头即可 -->
                    <van-field v-model="value" type="text" name="value" placeholder="请输入验证码" left-icon="lock" :rules="[{ pattern: /^[\d]{6}$/, message: '请填写验证码' }]">
                        <template v-slot:button>
                            <van-button size="small" native-type="button" :disabled="count >= 60 ? false : true" @click="sendCode">{{ count >= 60 ? "获取验证码" : "还剩" + count + "秒" }}</van-button>
                        </template>
                    </van-field>
                    <div style="margin: 16px">
                        <van-button round block type="info" native-type="submit" color="linear-gradient(to right, #ff6034, #ee0a24)">登录</van-button>
                    </div>
                </van-form>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import { mapMutations, mapGetters, mapActions } from "vuex";
export default {
    data() {
        return {
            active: 0,
            account: "", //手机号
            password: "",
            value: "", // 验证码 后面要改
            key: "", // 验证码的key
            count: 60,
            timer: null,
        };
    },
    computed: {
        ...mapGetters(["pathgo"]),
    },
    methods: {
        ...mapMutations(["getToken"]),
        ...mapActions(["getUserInfo"]),
        // 点击登录触发
        onSubmit(values) {
            // 判断是否登录成功
            this.axios.post("/login", values).then((re) => {
                // 登录成功,获取,token.存储到vuex与localStorage中
                if (re.token) {
                    this.$toast.success("登录成功");
                    // 存储当前的token
                    this.getToken(re.token);
                    this.getUserInfo(); // 获取当前用户的信息

                    // 拿到来到登录页面前的路径
                    let path = this.pathgo;
                    // 如果没有,默认回退
                    if (!path) {
                        this.$router.back();
                    }
                    // 登录成功,跳转会过来时的页面
                    this.$router.push(path);
                } else {
                    this.$toast.fail(re.msg);
                }
            });
        },

        // 发送短信
        sendCode() {
            this.axios
                .post("/register/verify", {
                    code: "",
                    key: this.key,
                    phone: this.account,
                    type: "login",
                })
                .then((re) => {
                    console.log("验证码发送结果", re);
                    if (re.status == 200) {
                        this.$toast.success(re.msg);

                        // 短信发送成功
                        // 开启定时器
                        this.timer = setInterval(() => {
                            if (this.count < 1) {
                                clearInterval(this.timer);
                                this.count = 60;
                            }
                            this.count--;
                        }, 1000);

                        // 短信发送失败
                    } else {
                        this.$toast.fail(re.msg);
                    }
                });
        },

        // 短信验证,点击登录触发
        codeLogin() {
            this.axios
                .post("/login/mobile", {
                    captcha: this.value,
                    phone: this.account,
                })
                .then((re) => {
                    // 登录成功,获取,token.存储到vuex与localStorage中
                    if (re.token) {
                        this.$toast.success("登录成功");
                        // 存储当前的token
                        this.getToken(re.token);
                        this.getUserInfo(); // 获取当前用户的信息

                        // 拿到来到登录页面前的路径
                        let path = this.pathgo;
                        // 如果没有,默认回退
                        if (!path) {
                            this.$router.back();
                        }
                        // 登录成功,跳转会过来时的页面
                        this.$router.push(path);
                    } else {
                        this.$toast.fail(re.msg);
                    }
                });
        },
    },
    created() {
        // 组件创建的时候获取一个key,用做短信验证
        // 为了避免重复发送验证码
        this.axios.get("/verify_code").then((re) => {
            this.key = re.key;
            // console.log(re.key);
        });
    },

    // 清理定时器 beforeRouteLeave
    beforeRouteLeave(to, from, next) {
        clearInterval(this.timer);
        next();
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },
};
</script>

<style lang="scss" scoped>
.login {
    width: 100vw;
    height: 100vh;
    background-image: linear-gradient(180deg, #eb5447 0, #ff8e3b);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    box-shadow: 0 10px 10px 10px #eb5447;

    .logtop {
        width: 82px;
        height: 82px;
        border-radius: 50%;
        transform: translateY(-40px);
        background: #fbdeda;
        font-size: 18px;
    }
    .tabs {
        width: 310px;
        height: 305px;
        background: #ffffff;
        border-radius: 12px;
        overflow: hidden;
    }
    ::v-deep .van-field__control {
        font-size: 18px;
    }
    ::v-deep .inpbj::focus {
        background: red;
    }

    // 图标
    ::v-deep .van-icon {
        margin-right: 10px;
    }

    // 按钮
    ::v-deep .van-button--info {
        background-image: linear-gradient(to right, #ff6034, #ee0a24);
        font-weight: 700;
        font-size: 18px;
        border: none;
    }

    ::v-deep .van-tab__text {
        font-weight: 700;
        font-size: 18px;
    }
}
</style>
